let Home = {
    baseUrl: 'http://81.71.65.4:3003',
    uri: location.href,
    /**
     * 
     * @param {根据id渲染对应的商品列表} id 
     */
    renderByIdshop(id) {
        let html = ''
        let par = null
        if (id > 0) {
            par = { categoryId: id, currPage: 0 }
        }


        axios.post(this.baseUrl + '/product/list', par).then((res) => {
            let data = res.data.list
            data.forEach((v, i) => {
                // console.log(v);
                html += `
                    <a href="xiangqing.html?sid=${v.productId}">
                    <li class="item"><img src="${v.imgUrl}">
                        <p>${v.masterName}</p>
                            </li>
                    </a>`
            })
            document.querySelector('.fl-xqul').innerHTML = html
        }).catch(() => {
            console.log('数据错误');
        })
    },

    /**
     * 渲染商品导航
     */
    renderShopNav() {
        let html = ''
        axios.get(this.baseUrl + '/category/all').then((res) => {
            // console.log(res);
            let data = res.data.list
            data.forEach((v, i) => {
                // console.log(v);
                html += `<a href="#" sid=${v.categoryId}>
                    <div sid=${v.categoryId}>
                        ${v.name}
                    </div>
                </a>`
            })
            document.querySelector('#fl-nav').innerHTML = html
            document.querySelector('#fl-nav').childNodes[0].classList.add('pitch')
            document.querySelector('#fl-nav').childNodes[0].firstElementChild.style.color = 'white'
        }).catch(() => {
            console.log('请求错误');
        })
    },
    /**
     * 渲染点击的商品
     */
    renderClickShop() {
        let uls = document.querySelector('#fl-nav')
        uls.addEventListener('click', (e) => {
            let sid = e.target.getAttribute('sid')
            let aid = e.target.parentNode.getAttribute('sid')
                //判断用户点击的是否是带有id的区域
            if (sid > 0) {
                this.renderByIdshop(sid)
                let as = e.target.parentNode.parentNode
                    // console.log(as);
                for (let j = 0; j < as.childNodes.length; j++) {
                    as.childNodes[j].classList.remove('pitch')
                    as.childNodes[j].firstChild.nextSibling.style.color = ''
                        // console.log(as.childNodes[j].firstChild.nextSibling);
                }
                e.target.parentNode.classList.add('pitch')
                e.target.style.color = '#FFF'
            }

        })

    },
    /**
     * 搜索框
     */
    searchShop() {
        let html = ''
        document.querySelector('.box2 [type=search]').addEventListener('keydown', (e) => {
            if (e.key == 'Enter') {
                let keys = document.querySelector('.van-f').value.trim()
                    // console.log(keys);
                axios.post(this.baseUrl + '/product/search', { keyword: keys }).then((res) => {
                    let data = res.data.list
                    if (data.length == 0) {
                        alert('抱歉这个商品目前没有上架')
                    }
                    data.forEach((v, i) => {
                        html += `<a href="xiangqing.html?sid=${v.productId}">
                    <li class="item"><img src="${v.imgUrl}">
                        <p>${v.masterName}</p>
                            </li>
                    </a>`
                    })
                    document.querySelector('.fl-xqul').innerHTML = html
                }).catch(() => {
                    console.log('请求错误');
                })
            }
        })
    }
}

onload = () => {
    let id = Home.uri.substring(Home.uri.indexOf("sid=") + 4)
    Home.renderByIdshop(id)

    Home.renderShopNav()

    Home.renderClickShop()

    Home.searchShop()

}